<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<ul th:fragment="pageindicator" class="pagination pagination-sm mt-2 justify-content-center">
    <li th:if="${pagelist} != null" th:each="page:${pagelist}" class="page-item" th:classappend="${page.appendflag}">
        <p class="page-link" onclick="refreshCodeList(this)" th:text="${page.desc}" th:index="${page.index}"
            th:start="${page.start}"></a>
    </li>
</ul>
<div th:fragment="refrescodelist">
    <p class="m-0 small">Remaining: <small id="remaining" th:text="${remaining}"></small></p>
    <div>
        <div th:if="${codelist} != null" class="list-group" style="height:100%;overflow-y:auto">
            <label th:each="code:${codelist}" class="list-group-item list-group-item-action gap-3 py-3">
                <div class="d-flex bg-primary text-white">
                    <div class="pt-2 text-center">
                        <input class="form-check-input" type="radio" name="codeInList">
                    </div>
                    <div class="ellipse p-2 flex-grow-1 w-75">
                        <h5 class="title mb-2 text-nowrap" th:text="${code.getDecodeTitle()}"></h5>
                    </div>
                </div>
                <div class="d-flex ellipse bg-secondary text-white">
                    <div class="p-2 w-75 flex-grow-1">
                        <p class="desc text-justify opacity-75" th:text="${code.getDecodeDesc()}"></p>
                    </div>
                    <div class="p-2">
                        <p class="mb-2" th:text="${code.date}"></p>
                        <p class="text-end"><small class="opacity-50"
                                th:text="${code.time}"></small></p>
                    </div>
                </div>
            </label>
        </div>
        <div th:unless="${codelist} != null" class="bg-secondary text-white rounded"
            style="text-align:center;line-height:180px">
            <p>No file exists in the current category.</p>
        </div>
    </div>
</div>

<div th:fragment="dialog">
    <div class="modal fade" id="dialogLoad">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Select existing code on the server</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="form-floating">
                        <select class="form-select" id="categories" onchange="categorySelected(this, null)">
                            <option th:each="category:${categories}" th:text="${category.desc}"></option>
                        </select>
                        <label for="categories" class="form-label">Select category (select one):</label>
                    </div>
                    <div id="codelist" class="mt-2" style="height:200px;width:100%;"></div>
                    <div id="pageindicator"></div>
                </div>
                <div class="modal-footer">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary">OK</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="dialogClean">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Warnings</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    Content will be cleared
                </div>
                <div class="modal-footer">
                    <div class="btn-group">
                        <button type="button" class="btn btn-primary" onClick="clean(innerValue)">Continue</button>
                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="dialogModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Error</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>The current service is <b>unavailable</b>. Wait until the status becomes normal and try again.
                    </p><br>
                    <p>You can see the current service status in the output window.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="dialogUpload">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Upload</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <p class="alert alert-danger p-1 m-0" style="display:none"><small>错误! 失败的操作。</small></p>
                <form method="post" id="upload_form" class="was-validated"
                    th:object="${userfile}" onsubmit="uploadFile()">
                    <div class="modal-body">
                        <div class="form-group form-floating">
                            <input class="form-control" type="text" list="categorylist" id="category"
                                th:field="*{category}" placeholder="Enter a category" required>
                            <datalist id="categorylist">
                                <option th:each="category:${categories}" th:value="${category.desc}" />
                            </datalist>
                            <div class="invalid-feedback">Select or create a category.</div>
                            <label for="category">Select categories</label>
                        </div>
                        <small style="margin-top: 5px;">The will be <b>saved with the name specified below</b>. If
                            <b>the same file name
                                exists</b> on the server,
                            <b>date information</b> is automatically <b>appended to the end of the name</b>. (Format:
                            _YYYY_MM_DD-HH_MM_SS)
                        </small>
                        <div class="form-group form-floating" style="margin-top: 5px;">
                            <input type="text" class="form-control" id="title" placeholder="Enter a file name"
                                name="title" required th:value="${userfile.getDecodeTitle()}" th:field="*{title}">
                            <div class="invalid-feedback">Please enter a file name.</div>
                            <label for="title">Title:</label>
                        </div>
                        <div class="form-group form-floating" style="margin-top: 5px;">
                            <input type="text" class="form-control" id="desc" placeholder="Add Brief Description"
                                name="desc" required th:value="${userfile.getDecodeDesc()}" th:field="*{desc}">
                            <div class="invalid-feedback">Necessary description information is missing.</div>
                            <label for="desc">Description:</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</html>